@function pxToRem($val) {
    @return $val/100+rem;
}
#subPage {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    display: flex;
    .left {
        width: 250px;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 6px;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .input{
            position: relative;
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            margin-bottom: 10px;
            .button{
                position: relative;
                width: 190px;
                height: 30px;
                background: #090723;
                border-radius: 6px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #fff;
                cursor: pointer;
                margin-right: 10px;
                &.move{
                    width: 30px;
                    height: 30px;
                    background: transparent;
                    &:hover{
                        background: transparent;
                        opacity: 0.7;
                    }
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                        margin-right: 0;
                    }
                }
                img{
                    width: 12px;
                    height:12px;
                    margin-right: 15px;
                }
                &:hover{
                    opacity: 0.7;
                }
            }
        }
        .scorll{
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            flex: 1;
            &::-webkit-scrollbar {
                width: 6px;
            }
            /*滚动槽*/
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
            }
            /* 滚动条滑块 */
            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background: rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            }
            &::-webkit-scrollbar-thumb:window-inactive {
                background: rgba(255, 0, 0, 0.1);
            }
            // /deep/ .el-tree{
            //     width: 100%;
            //     .is-current{
            //         >.el-tree-node__content{
            //             background-color: #BAE9FF !important;
            //         }
            //     }
            // }
        }

        .btn{
            width: 90%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .button {
                width: 100%;
                height: 30px;
                border-radius: 6px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
                cursor: pointer;
                transition: all 0.5s ease-in-out;
                font-family: Source Han Sans CN;
                font-weight: 400;
                &.cancel {
                    border: 1px solid var(--themeColor);
                    border-radius: 3px;
                    color: var(--themeColor);
                    &:hover {
                        background: var(--themeColor);
                    }
                }
            }
        }
    }
    .right {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        overflow: hidden;
        background-color: #fff;
        border-radius: 6px;
        .operationBox {
            padding-top: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .tableBtn {
                width: 120px;
                height: 35px;
                background: var(--themeColor);
                border-radius: 3px;
                text-align: center;
                line-height: 35px;
                box-sizing: border-box;
                color: #fff;
                cursor: pointer;

                .btnBox {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                &:hover {
                    opacity: 0.7;
                }
            }
        }
        .top{
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .bottom{
            width: 100%;
            flex: 1;
            overflow: hidden;
            border-radius: 6px;
            /deep/ .tableBox{
                position: relative;
                width: 100%;
                height: 100%;
                background-color: #fff;
                .operationBox{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                    .tableBtn{
                        margin: 0 5px;
                        .btnBox{
                            .icon{
                                display: block;
                                width: 20px;
                                height: 20px;
                                margin-right: 5px;
                            }
                        }

                    }
                }
                .pageFix{
                    position: absolute;
                    left: 50%;
                    bottom: 8px;
                    transform: translateX(-50%);
                }
                .tableList {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    padding: 0 20px 70px 20px;
                    box-sizing: border-box;
                    margin: auto;

                    .el-table--border::after, .el-table--group::after, .el-table::before {
                        display: none;
                    }
                    .el-table__fixed-right::before, .el-table__fixed::before{
                        display: none;
                    }

                    .el-table {
                        color: #333333;
                        font-family: MicrosoftYaHei;
                        font-size: 14px;
                        thead tr {
                            border-radius: 6px !important;
                            th {
                                padding: 12px 0;
                                color: #666666;
                                font-size: 14px;
                                font-family: Source Han Sans CN;
                            }
                        }
                    }

                    .el-table__row {
                        background-color: #fff;
                        cursor: pointer;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #666666;
                        border-bottom: 1px solid #eee;
                        &.el-table__row--level-1,
                        &.el-table__row--level-2 {
                            background-color: #FAFCFC !important;
                        }

                        td {
                            padding: 10px 0;
                        }
                    }

                    .el-table--striped .el-table__body tr.el-table__row--striped td {
                        background-color: #fff;
                        cursor: pointer;
                    }
                }
            }

        }
    }
}
.classAdd{
    width: 96%;
    margin: auto;
    margin-bottom: 20px;
    .right{
        width: 40%;
    }
    .left{
        .item{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 15px;
            span{
                margin-right: 20px;
            }
        }
    }

}
/deep/.custom-tree-node{
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.item2 {
    margin: auto;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    justify-content: center;
    align-items: center;
    span {
        padding-right: 10px;
    }
    .tip {
        color:red;
        margin-right: 6px;
    }
}
.myItem{
    align-items: flex-start;
}
.left::-webkit-scrollbar {
    display: none;
}
/deep/.el-input__inner{
    text-align: left;
}
/deep/ .ivu-page-next,
/deep/ .ivu-page-prev {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    border: none !important;
    line-height: 44px;
    a {
        font-size: 14px;
    }
}

/deep/ .ivu-page-item {
    width: 44px;
    height: 44px;
    line-height: 44px;
    a {
        font-size: 14px;
        color: #32585A;
    }
}

/deep/ .ivu-page-options-elevator {
    height: 44px;
}

/deep/ .ivu-page-options-elevator input {
    width: 67px;
    height: 44px;
    border-radius: 4px;
}

.red{
    display: inline-block;
    background-color:rgba(255, 72, 72, 0.1);
    border-radius:2px;
    border:1px solid #FF4848;
    color:#FF4848;
    padding:0 8px;
}
.green{
    display: inline-block;
    background-color: rgba(63, 207, 119, 0.1);
    border:1px solid #28D79C;
    color:#3FCF77;
    border-radius:2px;
    padding:0 8px;
}
